<template>
<div class="home-right">
    <div class="sidebar-block" v-if="!localval&&!$store.state.loginState">
        <h4 class="title">掘金 - juejin.im</h4>
        <p class="slogan">一个帮助开发者成长的社区</p>
        <div class="input-box">
            <div class="input-dropdown">+
                <input type="text" value="86" class="diqu">
                <img src="" alt="" class="arrow">
            </div>
            <input type="text" class="input" placeholder="请输入手机号" v-model="username" />
        </div>
        <div class="input-box">
            <input type="text" class="input" placeholder="输入密码" v-model="password" />
        </div>
        <button class="btn submit-btn" @click="adduser">注册账号</button>
        <div class="agreement-box">
            注册登录即表示
            <br />
            同意
            <a href="https://juejin.im/terms" target="_blank">用户协议</a>
            、
            <a href="https://juejin.im/privacy" target="_blank">隐私政策</a>
        </div>
    </div>
    <div class="block-body">
        <img src="//s3.pstatp.com/toutiao/xitu_juejin_web/img/app-install.6226a3b.png" alt="" class="qr-img">
        <div class="content-box">
            <div class="headline">下载掘金客户端</div>
            <div class="desc">一个帮助开发者成长的社区</div>
        </div>
    </div>
    <div class="banner" ref="bannerBox">
        <a href="">
            <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7962558c83c34ae5a4bf211cf4ae545f~tplv-k3u1fbpfcp-watermark.webp" alt="" class="banner-image">
        </a>
        <a class="iconfont close-btn" @click="close">&#xe71d;</a>
        <a href="" class="label">
            <span>广告</span>
        </a>
    </div>
    <div class="sidebar-block user-block">
        <header class="user-block-header">🎖️作者榜</header>
        <ul class="user-list">
            <li class="item">
                <!-- <img class="avatar" src="https://user-gold-cdn.xitu.io/2020/5/21/17235a98393b150f?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt=""> -->
                <div class="user-info">
                    <a href="" class="username">
                        <span class="name">Bven</span>
                        <a href="" class="rank">
                            <img src="" alt="">
                        </a>
                    </a>
                    <div class="position">切图🐶 @ 无业游民</div>
                </div>
            </li>
            <li class="item">
                <img class="avatar" src="https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/9a89c4048e82a153a1f323f95b716737~120x256.image" alt="">
                <div class="user-info">
                    <a href="" class="username">
                        <span class="name">小小摇钱树</span>
                        <a href="" class="rank">
                            <img src="" alt="">
                        </a>
                    </a>
                    <div class="position">前端开发</div>
                </div>
            </li>
            <li class="item">
                <img class="avatar" src="https://mirror-gold-cdn.xitu.io/16a33a8c06c6f9fbfa9?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt="">
                <div class="user-info">
                    <a href="" class="username">
                        <span class="name">寒夜梦未央</span>
                        <a href="" class="rank">
                            <img src="" alt="">
                        </a>
                    </a>
                </div>
            </li>
            <li class="item">
                <div class="more">
                    <span>完整榜单</span>
                    <a class="chevron-right">&gt;</a>
                </div>
            </li>
        </ul>
    </div>
    <div class="sidebar-block link-block">
        <ul class="link-list">
            <li class="item">
                <img src="//s3.pstatp.com/toutiao/xitu_juejin_web/img/juejin-extension-icon.4b79fb4.png" alt="" class="icon">
                <span class="link-title">下载掘金浏览器插件</span>
            </li>
            <li class="item">
                <img src="//s3.pstatp.com/toutiao/xitu_juejin_web/img/juejin-miner.b78347c.png" alt="" class="icon">
                <span class="link-title">前往掘金翻译计划</span>
            </li>
        </ul>
    </div>
    <div class="sidebar-block more-block">
        <ul class="more-list">
            <li class="item"><a href="">关于</a> ·</li>
            <li class="item"><a href="">营业执照</a> ·</li>
            <li class="item"><a href="">友情链接</a></li>
        </ul>
        <ul class="more-list">
            <li class="item"><a href="">用户协议</a> ·</li>
            <li class="item"><a href="">隐私政策</a> ·</li>
            <li class="item"><a href="">使用指南</a></li>
        </ul>
        <ul class="more-list">
            <li class="item"><a href="">津ICP备15003202号-2</a></li>
        </ul>
        <ul class="more-list">
            <li class="item"><a href="">京公网安备11010802026719号</a></li>
        </ul>
        <ul class="more-list">
            <li class="item"><a href="">©2020 掘金</a></li>
        </ul>
        <ul class="more-list account-list">
            <li class="item weibo"><a href=""><img src="//s3.pstatp.com/toutiao/xitu_juejin_web/img/weibo.0cd39f5.png" alt="" class="icon"></a></li>
            <li class="item wechat"><a href=""><img src="//s3.pstatp.com/toutiao/xitu_juejin_web/img/wechat.ce329e6.png" alt="" class="icon"></a></li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            localval:localStorage.getItem('isLogin'),
            username:'',
            password:''
        }
    },
    methods: {
        close() {
            this.$refs.bannerBox.style = 'display:none;'
        },
        adduser(){
            this.$store.dispatch('register',{
            phone: this.username,
            password: this.password,
            })
             this.username=''
            this.password=''
        }

    }
}
</script>

<style lang="scss">
.home-right {
    width: 240px;
    height: 100%;
    float: right;

    .sidebar-block {
        width: 100%;
        padding: 13px 15px;
        font-size: 14px;
        background-color: #fff;
        margin-bottom: 15px;

        .title {
            width: 208px;
            height: 18px;
            font-size: 16px;
            margin-bottom: 7px;
            color: #2e3135;
        }

        .slogan {
            width: 208px;
            height: 18px;
            margin-bottom: 7px;
            color: #2e3135;
        }

        .input-box {
            z-index: 1;
            padding: 0 10px;
            border: 1px solid #d9d9d9;
            display: flex;
            border-radius: 2px;
            justify-content: center;
            align-items: center;
            background-color: #fbfbfb;
            position: relative;
            margin-bottom: 10px;

            .input-dropdown {
                border-radius: 2px;
                font-size: 14px;
                color: #333;
                display: flex;

                .diqu {
                    border: none;
                    outline: none;
                    width: 32px;
                    margin: 0;
                    padding: 0;
                    background-color: #fbfbfb;
                }

                .arrow {
                    transition: all .45s cubic-bezier(.8, .15, .15, .86);
                }
            }

            .input {
                padding: 8.4px 7.2px;
                width: 100%;
                font-size: 16px;
                background-color: #fbfbfb;
                border: 1px solid #f4f4f4;
                border-radius: 2px;
                outline: none;
            }

            .send-vcode-btn {
                position: absolute;
                top: 0;
                right: 0;
                height: 100%;
                font-size: 14px;
                color: #007fff;
                line-height: 1;
                background-color: transparent;
                border-radius: 2px;
                border: none;
                padding: .5rem 1.3rem;
                outline: none;
                transition: background-color .3s, color .3s;
            }
        }

        .input-box {
            position: relative;
            margin-bottom: 10px;

            .input {
                padding: 8.4px 7.2px;
                width: 100%;
                font-size: 14px;
                background-color: #fbfbfb;
                border: 1px solid #f4f4f4;
                border-radius: 2px;
                outline: none;
                box-sizing: border-box;

                .send-vcode-btn {
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 100%;
                    font-size: 14px;
                    color: #007fff;
                    line-height: 1;
                    background-color: transparent;
                    border-radius: 2px;
                    border: none;
                    padding: .5rem 1.3rem;
                    outline: none;
                    transition: background-color .3s, color .3s;
                }
            }
        }

        .btn.submit-btn {
            padding: 8.4px 0;
            width: 100%;
            font-size: 14px;
            appearance: none;
            background-color: #007fff;
            color: #fff;
            border-radius: 2px;
            border: none;
            outline: none;
            transition: background-color .3s, color .3s;
        }

        .agreement-box {
            margin-top: 15px;
            font-size: 14px;
            line-height: 1.5;
            color: #767676;

            a {
                color: #007fff;
            }
        }
    }

    .block-body {
        display: flex;
        align-items: center;
        padding: 13px 15.6px;
        background: #fff;
        border-radius: 2px;
        margin-bottom: 15px;
        font-size: 14px;
        line-height: 1.29;
        color: #333;

        .qr-img {
            width: 50px;
            height: 50px;
            margin-right: 6px;
        }

        .content-box {
            color: #909090;

            .headline {
                font-size: 16px;
                font-weight: 600;
                color: #333;
            }

            .desc {
                font-size: 14px;
                margin-top: 5px;
                color: #909090;
            }
        }

    }

    .banner {
        position: relative;
        font-size: 0;
        height: 200px;
        margin-bottom: 15px;

        .banner-image {
            width: 100%;
            height: 100%;
        }

        .close-btn {
            position: absolute;
            top: .5rem;
            right: .5rem;
            font-size: 12px;
            color: #909090;
            opacity: .5;
            display: none;
        }

        .label {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 36px;
            height: 36px;
            font-size: 20px;
            z-index: 1;
            transform: scale(.5);
            -webkit-transform: scale(.5);
            transform-origin: right bottom;
            -webkit-transform-origin: right bottom;
            color: #fff;
            background-color: rgba(0, 0, 0, .2);
            border: 1px solid #fff;
            border-radius: 6px;
            padding-left: 15px;
            padding-right: 15px;
            font-weight: 300;

            span {
                vertical-align: top;
            }
        }
    }

    .banner:hover {
        .close-btn {
            display: block;
        }
    }

    .user-block {
        background: #fff;
        padding: 0;

        .user-block-header {
            padding: 12px 15.6px;
            border-bottom: 1px solid hsla(0, 0%, 59.2%, .1);
        }

        .user-list {
            padding: 0;
            margin: 0;

            .item {
                padding: 12px 15.6px;
                display: flex;
                align-items: center;

                .avatar {
                    flex: 0 0 auto;
                    width: 45.6px;
                    height: 45.6px;
                    border-radius: 50%;
                    margin-right: .5rem;
                }

                .user-info {
                    .username {
                        max-width: 128px;
                        display: inline-block;
                        vertical-align: top;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;

                        .rank {
                            margin-left: 4px;
                            vertical-align: middle;
                            text-decoration: none;
                            color: #909090;

                            img {
                                width: auto;
                                height: auto;
                            }
                        }
                    }

                    .position {
                        color: #909090;
                        font-size: 14px;
                        margin-bottom: 3px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                }

            }

        }

        .more {
            margin: 0 auto;
            color: #007fff;
            border-top: 1px solid hsla(0, 0%, 59.2%, .1);
        }

        .chevron-right {
            margin-left: 5px;
        }
    }

    .link-block {
        .link-list {
            .item {
                position: relative;
                display: flex;
                align-items: center;
                padding: 12px;
                height: 100%;

                .icon {
                    width: 36px;
                    margin-right: 9.6px;
                }
            }

            .link-title {
                position: relative;
                font-size: 14px;
                line-height: 1;
                color: #333;
            }
        }
    }

    .more-block {
        padding: 0;
        background-color: transparent;
        box-shadow: none;

        .more-list {
            font-size: 14px;
            line-height: 1.6;
            color: #9aa3ab;
            display: table;
            clear: both;

            .item {
                float: left;

                a {
                    text-decoration: none;
                    color: #909090;
                    margin: 0 5px;
                }
            }
        }

        .account-list {
            display: flex;
            justify-content: flex-start;
            margin: 12px 0;

            .icon {
                width: 24px;
            }
        }
    }
}
</style>
